<template>
  <div v-if="data._isInit">
    <el-collapse-item :title="$t('基础配置')" name="1">
      <el-form-item :label="$t('标题')">
        <el-input v-model="config.title"></el-input>
      </el-form-item>
    </el-collapse-item>
    <el-collapse-item :title="$t('数据配置')" name="2">
      <el-form-item :label="$t('数据视图')">
        <l-dbsource-select
          v-model="config.dataCode"
          @change="handleDataSourceChange"
          @init="handleDataSourceInit"
        />
      </el-form-item>
      <el-form-item :label="$t('维度')">
        <l-select v-model="config.labelKey" :options="fieldOptions" />
      </el-form-item>
      <div
        style="padding: 10px 0"
        v-if="config.indicator && config.indicator.length > 0"
      >
        <div
          class="learun-row-form-input"
          :key="item.id"
          v-for="(item, index) in config.indicator"
        >
          <el-form-item
            label-width="40px"
            :label="$t('名称')"
            style="margin-bottom: 8px"
          >
            <el-input v-model="item.name"></el-input>
          </el-form-item>
          <el-form-item
            label-width="40px"
            :label="$t('数值')"
            style="margin-bottom: 8px"
          >
            <el-input-number
              v-model="item.max"
              controls-position="right"
              :placeholder="$t('please enter')"
            ></el-input-number>
          </el-form-item>
          <el-form-item
            label-width="40px"
            :label="$t('字段')"
            style="margin-bottom: 0"
          >
            <l-select v-model="item.valueKey" :options="fieldOptions" />
          </el-form-item>
          <el-button
            v-if="config.indicator.length > 1"
            :title="$t('Delete')"
            @click="handleRemoveIndicator(index)"
            class="learun-row-form-input-delete"
            circle
            plain
            size="mini"
            type="danger"
          >
            <i class="el-icon-close"></i>
          </el-button>
        </div>
      </div>
      <div style="margin-bottom: 10px">
        <el-button type="primary" size="mini" @click="handleAddIndicator">{{
          $t("添加")
        }}</el-button>
      </div>
    </el-collapse-item>
    <el-collapse-item :title="$t('雷达图')" name="3">
      <el-form-item :label="$t('半径大小')">
        <el-slider v-model="radar.radius" />
      </el-form-item>
      <el-form-item :label="$t('标记形状')">
        <l-select v-model="radar.symbol" :options="iconOptions" />
      </el-form-item>
      <el-form-item :label="$t('区域填充')">
        <el-switch v-model="radar.isArea" />
      </el-form-item>
    </el-collapse-item>
    <el-collapse-item :title="$t('文本标签')" name="4">
      <el-form-item :label="$t('是否显示')">
        <el-switch v-model="label.show" />
      </el-form-item>
      <template v-if="label.show">
        <el-form-item :label="$t('文本颜色')">
          <l-input-color v-model="label.color" />
        </el-form-item>
        <el-form-item :label="$t('文本位置')">
          <l-select
            :clearable="false"
            :options="labelPositionOptions2"
            v-model="label.position"
          />
        </el-form-item>
        <el-form-item :label="$t('文本粗细')">
          <l-select
            :clearable="false"
            :options="labelFontWeightOptions"
            v-model="label.fontWeight"
          />
        </el-form-item>

        <el-form-item :label="$t('字体大小')">
          <el-input-number
            v-model="label.fontSize"
            :max="24"
            :min="12"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item :label="$t('格式方式')">
          <l-select
            :clearable="false"
            :options="labelFormatterTypeOptions"
            v-model="label.formatterType"
          />
        </el-form-item>
        <el-form-item v-if="label.formatterType == 'fn'" :label="$t('格式脚本')">
          <el-button
            type="primary"
            size="mini"
            @click="handleAddCode('labelFormatter')"
            >{{ $t("设置") }}</el-button
          >
        </el-form-item>
        <el-form-item v-else :label="$t('格式文本')">
          <el-input class="l-input-icon" v-model="label.formatter">
            <template slot="append">
              <el-popover
                placement="top-start"
                :title="$t('参数说明')"
                width="400"
                trigger="hover"
              >
                <p><span style="color: #ff0033">{a}</span>：{{ $t('系列名') }}。</p>
                <p><span style="color: #ff0033">{b}</span>：{{ $t('数据名') }}。</p>
                <p><span style="color: #ff0033">{c}</span>：{{ $t('数据值') }}。</p>
                <p><span style="color: #ff0033">{d}</span>：{{ $t('百分比') }}。</p>
                <p><span style="color: #ff0033">{e}</span>：{{ $t('换行') }}。</p>
                <p>
                  <span style="color: #ff0033">{@xxx}</span>：{{ $t('数据中名为') }}
                  <span style="color: #ff0033">'xxx'</span> {{ $t('的维度的值，如') }}
                  <span style="color: #ff0033">{@product}</span> {{ $t('表示名为') }}<span
                    style="color: #ff0033"
                    >'product'</span
                  >
                  {{ $t('的维度的值') }}。
                </p>
                <p>
                  <span style="color: #ff0033">{@[n]}</span>：{{ $t('数据中维度') }}
                  <span style="color: #ff0033">n</span> {{ $t('的值，如') }}
                  <span style="color: #ff0033">{@[3]}</span>{{ $t('表示维度 3 的值，从') }}
                  {{ $t('0 开始计数') }}。
                </p>
                <el-button
                  slot="reference"
                  icon="learun-icon-circle-question"
                />
              </el-popover>
            </template>
          </el-input>
        </el-form-item>
      </template>
    </el-collapse-item>
    <el-collapse-item :title="$t('图例设置')" name="5">
      <el-form-item :label="$t('是否显示')">
        <el-switch v-model="legend.show" />
      </el-form-item>
      <template v-if="legend.show">
        <el-form-item :label="$t('布局朝向')">
          <l-select
            :clearable="false"
            :options="legendOrientOptions"
            v-model="legend.orient"
          />
        </el-form-item>
        <el-form-item :label="$t('所在位置')">
          <l-select
            :clearable="false"
            :options="legendPositionOptions"
            v-model="legend.position"
          />
        </el-form-item>
        <el-form-item :label="$t('边距大小')">
          <el-input-number
            :min="0"
            controls-position="right"
            v-model="legend.padding"
          />
        </el-form-item>
        <el-form-item :label="$t('宽度自动')">
          <el-switch v-model="legend.widthAuto" />
        </el-form-item>
        <el-form-item v-if="!legend.widthAuto" :label="$t('宽度')">
          <el-input-number
            v-model="legend.width"
            :min="0"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item :label="$t('标记宽度')">
          <el-input-number
            v-model="legend.itemWidth"
            :min="0"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item :label="$t('标记高度')">
          <el-input-number
            v-model="legend.itemHeight"
            :min="0"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item :label="$t('标记形状')">
          <l-select v-model="legend.itemIcon" :options="iconOptions" />
        </el-form-item>
        <el-form-item :label="$t('文本颜色')">
          <l-input-color v-model="legend.textStyle.color" />
        </el-form-item>
      </template>
    </el-collapse-item>
    <el-collapse-item :title="$t('配色设置')" name="6">
      <div style="margin-bottom: 8px">
        <el-button type="primary" size="mini" @click="handleAddColor">{{
          $t("添加")
        }}</el-button>
        <el-button
          v-if="echarts.color && echarts.color.length > 0"
          type="danger"
          size="mini"
          @click="handleRemoveColor"
          >{{ $t("Delete") }}</el-button
        >
      </div>
      <template v-if="echarts.color">
        <el-form-item
          v-for="(color, index) in echarts.color"
          :key="index"
          label-width="0"
        >
          <l-input-color v-model="color.v" />
        </el-form-item>
      </template>
    </el-collapse-item>
  </div>
</template>
<script>
import configMixins from "../mixins/config";
export default {
  mixins: [configMixins()],
  data() {
    return {};
  },
  computed: {
    radar() {
      return this.series.radar;
    },
  },
  methods: {
    init(data) {
      const config = {
        echarts: {
          color: [],
          legend: {
            show: true,
            orient: "horizontal",
            position: "bottomCenter",
            widthAuto: true,
            width: 200,
            itemWidth: 25,
            itemHeight: 14,
            itemIcon: "",
            textStyle: {
              color: "",
            },
            padding:8,
          },
          series: {
            label: {
              show: false,
              color: "",
              position: "top",
              fontWeight: "",
              formatterType: "label", //label  文本 fn 方法
              formatter: "",
            },
            radar: {
              radius: 50, //半径大小
              symbol: "none", //标记形状
              isArea: true, //区域填充
            },
          },
        },
        // 数据配置
        dataCode: "",
        labelKey: "",
        indicator: [
          {
            name: `指标1`,
            max: undefined,
            color: undefined,
            valueKey: "",
          },
        ],
      };
      this.commonInit(data, config);
    },
    clearKeys() {
      this.config.labelKey = "";
      if (this.config.indicator) {
        this.config.indicator.forEach((item) => {
          item.valueKey = "";
        });
      }
    },
    handleAddIndicator() {
      this.config.indicator.push({
        name: `指标${this.config.indicator.length + 1}`,
        max: undefined,
        color: undefined,
        valueKey: "",
      });
    },
    handleRemoveIndicator(index) {
      this.config.indicator.splice(index, 1);
    },
  },
};
</script>

